#@layout("充值二维码")
#define main()
<style>
    .upload-icon{
        padding: 18px;
        width: 54px;
        height: 54px;
        position: relative;
        border: 1px dashed #e2e2e2;
        text-align: center;
        float: left;
        cursor:pointer;
    }
    .upload-icon i{
        font-size: 40px;
        color: #009688;
    }
    .upload-icon span {
        font-size: 10px;
    }
    .layui-upload-img {
        width: 92px;
        height: 92px;
    }
    .image-div {
        position: relative;
        width: 92px;
        height: 92px;
        float: left;
        margin-right: 7px;
    }
    .image-div i{
        position: absolute;
        margin: -10px 0px 0px 80px;
        font-size: 18px;
        color: #5CACEE;
        cursor:pointer;
    }
    .image-div-default {
        position: absolute;
        bottom: 0;
        background-color: #5CACEE;
        color: #fff;
        font-size: 10px;
        padding: 1px;
        text-align: center;
    }
</style>
<body>
<div class="layui-form timo-compile">
    <form action="#(ctxAd)/recharge/qrcode/save">
    	<div style="text-align: center; font-size: 20px;">
			请上传您微信无固定金额二维码
		</div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label"></label>
            <div class="layui-upload-list">
                <div id="upload-img-qrcodeNoAmtImage">
                	#if(noAmtImg ??)
                	<div id="upload-show-qrcodeNoAmtImage" ><div class="image-div"><i onclick="delImg('qrcodeNoAmtImage')" class="layui-icon">&#x1007;</i><img src="#image(noAmtImg)" alt="" class="layui-upload-img"></div></div>
                	#end
                </div>
                <div class="upload-icon" id="upload-qrcodeNoAmtImage" #if(noAmtImg ??) style="display: none" #end >
                    <i class="layui-icon">&#xe681;</i>
                    <span>点击上传</span>
                </div>
            </div>
        </div>
    </form>
</div>
</body>
#end
#define js()
<script>
	var $;
	layui.use(['upload', 'layer'], function() {
	    $ = layui.jquery;
	    var upload = layui.upload;
	  	//图片上传
	    upload.render({
	        elem: '#upload-qrcodeNoAmtImage',
	        url: '#(ctxAd)/recharge/qrcode/uploadNoAmt',
	        multiple: true,
	        number: 1,
	        before: function(obj){
	            obj.preview(function(index, file, result){
	                $('#upload-img-qrcodeNoAmtImage').append('<div id="upload-show-qrcodeNoAmtImage"><div class="image-div"><i class="layui-icon" onclick="delImg(\'qrcodeNoAmtImage\')" >&#x1007;</i><img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img"></div></div>')
	                $('#upload-qrcodeNoAmtImage').hide();
	            });
	        },
	        done: function(res){
	            $('#qrcodeNoAmtImage').val(res.data);
	            $('#upload-show-qrcodeNoAmtImage img').attr('src',res.data);
	            layer.msg('上传成功', {offset: '15px', time: 1500, icon: 1});
	        }
	    });
	
	});
	
	function delImg(id){
		$('#upload-show-'+id).remove();
		$('#upload-'+id).show();
	}
</script>
#end